<template>
    <div id="nav">
        <ul>
            <li @click="openclick(index)" v-for="(item,index) in nav" :key="index" :class="item.isactive">
                <router-link :to="item.path">
                    <i class="iconfont" :class="'icon'+'-'+item.icon"></i>
                    <span>{{item.title}}</span>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script type="text/ecmascript-6">
export default {
  data () {
    return {
      factive: false,
      nav: [{
        title: '招聘',
        icon: 'biaodan',
        path: '/index',
        isactive: ''
      },
      {
        title: '薪酬',
        icon: 'qian',
        path: '/pay',
        isactive: ''
      },
      {
        title: '我的',
        icon: 'xiugaitouxiang',
        path: '/personal',
        isactive: ''
      }
      ]
    }
  },
  methods: {
    openclick (index) {
      var id = document.getElementById('nav')
      var Arr = id.getElementsByTagName('li')
      for (let i = 0; i < Arr.length; i++) {
        Arr[i].className = ''
      }
      Arr[index].classList.add('active')
    }
  }
}
</script>
<style scoped>
    .active{
         color: #ff9800;
    }
    .native {
        margin-top: 10px;
        height: 35px;
        width: 100%;
        border-radius: 5px;
        line-height: 35px;
        color: #ff9800;
    }
    #nav {
        width: 100%;
        height: 51px;
        position: fixed;
        left: 0px;
        bottom: 0px;
        background: #F0F0F0;
        border-top: 1px solid #eee;
    }
    #nav ul {
        width: 100%;
        height: 45px;
        display: flex;
    }
    #nav ul li {
        flex: 1;
        text-align: center;
    }
    #nav ul li a i {
        width: 30px;
        height: 30px;
        font-size: 20px;
        display: block;
        margin: 2px auto;
        overflow: hidden;
    }
    #nav ul li a span {
        display: block;
        font-size: 12px;
    }
    #nav ul .navMain {
        width: 90px;
        height: 90px;
        background: #ff9800;
        text-align: center;
    }
</style>
